/*
 * 将滑动的进度条封装成对象
 * 2018-1-23
 * order by yanyanyan
 * 
 * */
function Progress_(data) {
	this.gObj = {};
	this.$box_ = data.$box_;
	this.maxWidth_ = data.maxWidth_ || "4rem";
	this.leftPercent = data.percent || 0;
}
Progress_.prototype = {
	constructor: Progress_,
	getColor: function() {
		console.log(this.bgColor_);
	},
	init: function() {
		this.$box_.html('<div id="text_xa_">left:'+ this.leftPercent.toFixed(2) +'</div>' +
			'<div id="box_">' +
					'<div id="bg_">' +
						'<div id="bgcolor_"></div>' +
					'</div>' +
					'<div id="bt_"></div>' +
				'</div>' +
			'<div id="text_xa">right:'+ (1-this.leftPercent).toFixed(2) +'</div>');
		this.initStyle();
		this.touchstart();
		this.touchmove();
		this.touchend();
		this.mousedown();
		this.mousemove();
		this.mouseup();
	},
	initStyle: function() {
		var that = this;
		if(that.maxWidth_.indexOf('rem')!=-1){
			that.gObj.left = this.maxWidth_.replace('rem','')*that.leftPercent+'rem';
		}else{
			that.gObj.left = this.maxWidth_*that.leftPercent;
		}
		
		$('#box_').css({
			position: 'relative',
			width: that.maxWidth_,
			margin:'0.2rem',
			border: '1px solid transparent'
		})
		$('#bg_').css({
			height: '0.4rem',
			'margin-top': '0.14666667rem',
			border: '1px solid #ddd',
			'border-radius': '5px',
			overflow: 'hidden',
			position: 'relative'
		})
		$('#bgcolor_').css({
			background: '#f3f3f3',
			width: that.gObj.left,
			height: '0.4rem',
			'border-radius': '5px'
		})
		$('#bt_').css({
			width: '0.4rem',
			height: '0.66666667rem',
			'background-color': '#f3f3f3',
			'border-radius': '0.4rem',
			overflow: 'hidden',
			position: 'absolute',
			left: that.gObj.left,
			'margin-left': '-0.2rem',
			border: '1px solid #d0cbcb',
			top: '0.02rem',
			cursor: 'pointer'
		})
		$('#text_xa_').css({
			padding: '0 0.26666667rem',
			margin: '0 auto',
			'font-size':' 0.32rem',
			'padding-left': '0.13333333rem',
			'padding-top':' 0.02666667rem',
			'line-height': '2em'
		})
		$('#text_xa').css({
			padding: '0 0.26666667rem',
			margin: '0 auto',
			'font-size': '0.32rem',
			'padding-left': '0.13333333rem',
			'padding-top': '0.02666667rem',
			'line-height': '2em'
		})
	},
	touchstart: function(){
		this.gObj.maxWidth = $('#box_').width();
		var that = this;
		$('#bt_').get(0).addEventListener('touchstart', function(e) {
			that.gObj.left =$('#bgcolor_').width();
			that.gObj.ox = e.touches[0].clientX - that.gObj.left;
			that.gObj.status = true;
		})
		
	},
	touchmove: function(){
		var that = this;
		$('#bt_').get(0).addEventListener('touchmove', function(e) {
			if(that.gObj.status) {
				that.gObj.left = e.touches[0].clientX - that.gObj.ox;
				if(that.gObj.left < 0) {
					that.gObj.left = 0;
				}
				if(that.gObj.left > that.gObj.maxWidth) {
					that.gObj.left = that.gObj.maxWidth;
				}
				$('#bt_').css('left', that.gObj.left);
				$('#bgcolor_').width(that.gObj.left);
				var percent1 = parseFloat(that.gObj.left*100 /( that.gObj.maxWidth)).toFixed(2) + '%';
				$('#text_xa_').html('left:' + percent1);
				$('#text_xa').html('right:' + parseFloat((that.gObj.maxWidth-that.gObj.left)*100 /( that.gObj.maxWidth)).toFixed(2) + '%');
			}
		})
	},
	touchend: function(){
		var that = this;
		$('#bt_').get(0).addEventListener('touchend', function(e) {
			that.gObj.status = false;
		})
	},
	mousedown: function(){
		var that = this;
		$('#bt_').mousedown(function(e) {
			that.gObj.left =$('#bgcolor_').width();
			that.gObj.ox = e.pageX- that.gObj.left;
			that.gObj.status = true;
		})
	},
	mousemove: function(){
		var that = this;
		$(document).mousemove(function(e) {
			if(that.gObj.status) {
				that.gObj.left = e.pageX - that.gObj.ox;
				if(that.gObj.left < 0) {
					that.gObj.left = 0;
				}
				if(that.gObj.left > that.gObj.maxWidth) {
					that.gObj.left = that.gObj.maxWidth;
				}
				$('#bt_').css('left', that.gObj.left);
				$('#bgcolor_').width(that.gObj.left);
				var percent1 = parseFloat(that.gObj.left*100 /( that.gObj.maxWidth)).toFixed(2) + '%';
				$('#text_xa_').html('left:' + percent1);
				$('#text_xa').html('right:' + parseFloat((that.gObj.maxWidth-that.gObj.left)*100 /( that.gObj.maxWidth)).toFixed(2) + '%');
			}
		})
	},
	mouseup: function(){
		var that = this;
		$(document).mouseup(function(e) {
			console.log(11)
			that.gObj.status = false;
		})
	}
}
